<template>
	<div>
		<cl-crud @load="onLoad">
			<template #table-column-problemType="{scope}">
				{{ scope.row.categoryId }}
			</template>
			<template #table-column-status="{scope}">
				<span v-if="scope.row.status == 1" style="color:#22DE48">启用</span>
				<span v-if="scope.row.status == 0" style="color:#A2A4BA">禁用</span>
			</template>
			<template #table-column-content="{scope}">
				<div class="content-line">{{ scope.row.content }}</div>
			</template>
			<template #table-column-app="{scope}">
				<div>
					{{ platForm(scope.row.app) }}
				</div>
			</template>
			<template #table-column-type="{scope}">
				<div>{{ scope.row.type | template_type }}</div>
			</template>
			<template #slot-delete="{scope}">
				<del-btn @del="crud.delete(scope.row)"></del-btn>
			</template>
		</cl-crud>

		<cl-form ref="cl-form"></cl-form>
	</div>
</template>

<script>
import { mapGetters } from 'vuex';
import { templateType } from '@/dict/index';
export default {
	data() {
		return {
			crud: null,
			options: [],
			list: []
		};
	},
	computed: {
		...mapGetters(['platformList']),
		platForm() {
			return val => {
				if (!val) {
					return '';
				}
				let item = this.platformList.filter(i => i.value == val)[0];
				return item ? item.label : val;
			};
		}
	},
	mounted() {},
	methods: {
		onLoad({ ctx, app }) {
			const self = this;
			const { permission } = this.$store.state.menu;
			const { add, delete: del, update } =
				this.$service.systemMenagement.template.permission || {};
			this.crud = app;
			ctx.service({
				page: this.$service.systemMenagement.template.page,
				update: this.$service.systemMenagement.template.update,
				delete: this.$service.systemMenagement.template.delete,
				add: this.$service.systemMenagement.template.add,
				info: ({ id }) => {
					let item = this.list.filter(e => e.id == id);
					return Promise.resolve(item[0]);
				}
			})
				.permission({
					add: permission.includes(add),
					delete: permission.includes(del),
					update: permission.includes(update)
				})
				.set('dict', {
					label: {
						add: '添加文案'
					}
				})
				.on('info', (data, { next }) => {
					next(data);
					return data;
				})
				.set('table', {
					columns: [
						{
							type: 'selection',
							align: 'center',
							width: 60
						},
						{
							label: '序号',
							type: 'index',
							align: 'center',
							width: 60
						},
						{
							label: '平台',
							prop: 'app',
							align: 'center'
						},
						{
							label: '名称',
							prop: 'name',
							align: 'center'
						},
						{
							label: '模板',
							prop: 'content',
							align: 'center',
							'min-width': 300
						},
						{
							label: '备注',
							prop: 'remark',
							align: 'center',
							emptyText: '暂无'
						},
						{
							label: '类型',
							prop: 'type',
							align: 'center'
						},
						{
							label: '场景',
							prop: 'shoptype',
							align: 'center',
							dict: [
								{
									label: '淘宝',
									value: 1
								},
								{
									label: '京东',
									value: 2
								}
							]
						},
						{
							label: '状态',
							prop: 'status',
							align: 'center'
						},
						{
							label: '创建时间',
							prop: 'createTime',
							align: 'center',
							sortable: 'custom',
							emptyText: '0'
						}
					],

					op: {
						layout: ['edit', 'slot-delete']
					}
				})
				.set('upsert', {
					props: {
						labelWidth: '90px',
						center: true,
						'custom-class': 'custom-class-dialog-mini'
					},
					items: [
						// {
						// 	prop: 'app',
						// 	label: '平台',
						// 	component: {
						// 		name: 'platform-app',
						// 		data() {
						// 			return {
						// 				options: [],
						// 				value2: ''
						// 			};
						// 		},
						// 		watch: {
						// 			value(val) {
						// 				this.value2 = val;
						// 			}
						// 		},
						// 		props: {
						// 			value: [String]
						// 		},
						// 		async mounted() {
						// 			let platform = await self.$service.platform.app.page();
						// 			this.options = platform.list;
						// 		},
						// 		methods: {
						// 			change(e) {
						// 				this.$emit('input', e);
						// 			}
						// 		},
						// 		render() {
						// 			return (
						// 				<div style="width:100px">
						// 					<el-select
						// 						onChange={this.change}
						// 						v-model={this.value2}
						// 						placeholder="请选择">
						// 						{this.options.map(e => {
						// 							return (
						// 								<el-option
						// 									key={e.key}
						// 									label={e.name}
						// 									value={e.key}></el-option>
						// 							);
						// 						})}
						// 					</el-select>
						// 				</div>
						// 			);
						// 		}
						// 	},
						// 	rules: [{ required: true, message: '请选择平台', trigger: 'blur' }]
						// },
						{
							label: '类型',
							prop: 'type',
							span: 10,
							component: {
								name: 'el-select',
								props: {
									placeholder: '请选择文案类型',
									filterable: true,
									'default-first-option': true,
									clearable: true
								},
								options: templateType
							},
							rules: {
								required: true,
								message: '问题类型'
							}
						},
						{
							label: '标题',
							prop: 'name',
							span: 20,
							component: {
								name: 'el-input',
								attrs: {
									placeholder: '请输入标题'
								}
							},
							rules: {
								required: true,
								message: '请输入标题'
							}
						},
						{
							label: '场景',
							prop: 'shoptype',
							value: 1,
							component: {
								name: 'el-radio-group',
								options: [
									{
										label: '淘宝',
										value: 1
									},
									{
										label: '京东',
										value: 2
									}
								]
							},
							rules: {
								required: true,
								message: '场景不能为空'
							}
						},
						{
							label: '模板内容',
							prop: 'content',
							span: 24,
							component: {
								name: 'el-input-content',
								data() {
									return {
										value2: '',
										options: [
											{
												label: '标题',
												value: '{title}'
											},
											{
												label: '在售价',
												value: '{price}'
											},
											{
												label: '优惠券',
												value: '{couponMoney}'
											},
											{
												label: '券后价',
												value: '{endPrice}'
											},
											{
												label: '淘口令',
												value: '{tkl}'
											}
										]
									};
								},
								watch: {
									value(val) {
										this.value2 = val;
									}
								},
								props: {
									value: [String, Number]
								},
								methods: {
									Click(val) {
										this.value2 += val.target.dataset.val;
									},
									input(val) {
										this.$emit('input', val);
									}
								},
								render() {
									return (
										<div>
											<div>
												{this.options.map(item => {
													return (
														<el-tag
															class="cursor-tag"
															onClick={this.Click}
															data-val={item.value}
															type="info">
															{item.label}
														</el-tag>
													);
												})}
											</div>
											<el-input
												rows={8}
												type="textarea"
												onInput={this.input}
												v-model={this.value2}></el-input>
										</div>
									);
								}
							}
						},
						{
							label: '备注',
							prop: 'remark',
							component: {
								name: 'el-input',
								attrs: {
									type: 'textarea',
									row: 6
								}
							}
						},
						{
							prop: 'status',
							label: '状态',
							span: 24,
							value: 1,
							component: {
								name: 'el-input-number1',
								attrs: {
									'controls-position': 'right',
									min: 1,
									max: 10000
								},
								data() {
									return {
										value2: 1
									};
								},
								watch: {
									value(val) {
										this.value2 = val;
									}
								},
								props: {
									value: [String, Number]
								},
								methods: {
									change(e) {
										this.$emit('input', e);
									}
								},
								mounted() {
									this.value2 = this.value;
								},
								render() {
									return (
										<el-radio-group
											onChange={this.change}
											v-model={this.value2}>
											<el-radio label={1}>启用</el-radio>
											<el-radio label={0}>禁用</el-radio>
										</el-radio-group>
									);
								}
							},
							rules: [{ required: true, message: '状态不能为空', trigger: 'blur' }]
						}
					]
				})
				.set('layout', [
					['refresh-btn', 'add-btn', 'query', 'flex1', 'search-key'],
					['data-table'],
					['flex1', 'pagination']
				])
				.on('refresh', async (params, { next }) => {
					let { list } = await next(params);
					this.list = list;
				})
				.done();

			app.refresh();
		}
	}
};
</script>

<style lang="stylus" scoped>
.sales-top {
	color: red;
}

.sales-bottom {
	color: green;
}
</style>

<style lang="scss">
.content-line {
	@include ellipsis(5);
	height: 110px;
}
</style>
